<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Display a globe on a webpage</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
    <!-- <script src="mapbox-gl-language.js"></script> -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script type="module">
        /** json获取地址
            https://g82e259j.ipyingshe.net/geoserver/rp7/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&typeName=rp7:g_shi&maxFeatures=500&cql_filter=code%20like%20%273701%25%27
        */
        let shi = await $.getJSON('shi_3701.json');
        import { basemaps } from "./basemap.js";
        mapboxgl.accessToken = 'pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ';
        const map = new mapboxgl.Map({
            container: 'map',
            // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
            // style: 'mapbox://styles/mapbox/streets-v11',
            zoom: 1.5,
            center: [30, 50],
            // projection: 'globe'
        });
        let mlancontrol = new MapboxLanguage({
            defaultLanguage: "zh-Hans",
        });
        map.addControl(mlancontrol);

        map.setStyle('mapbox://styles/mapbox/satellite-streets-v11'
            // basemaps['tdtTer'].value
        );

        // 随机生成颜色
        function randomColor() {
            return ("#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6));
        };
        map.on('load', () => {
            map.addSource('mapbox-dem', {
                'type': 'raster-dem',
                'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
                'tileSize': 512,
                'maxzoom': 14
            });
            // add the DEM source as a terrain layer with exaggerated height
            // map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

            // Set the default atmosphere style
            map.setFog({});
            map.fitBounds([[116.2209040200000061,35.9903522400000000],[117.9695655700000003,37.5369263700000033]]);
            $.getJSON(
                'xian_3701_org.geojson',
                function (areasGEOJSON) {
                    areasGEOJSON.features.forEach(area => {
                        area.properties.color = randomColor();
                    });
                    map.addSource('areasjson', {
                        'type': 'geojson',
                        'data': areasGEOJSON
                    });
                    map.addLayer({
                        'id': 'extrusion',
                        'type': 'fill-extrusion',
                        'source': 'areasjson',
                        'paint': {
                            // Get the `fill-extrusion-color` from the source `color` property.
                            'fill-extrusion-color': ['get', 'color'],

                            // Get `fill-extrusion-height` from the source `height` property.
                            // 'fill-extrusion-height': 6000,// ['get', 'height'],

                            // Get `fill-extrusion-base` from the source `base_height` property.
                            // 'fill-extrusion-base': ['get', 'base_height'],

                            // Make extrusions slightly opaque to see through indoor walls.
                            'fill-extrusion-opacity': 0
                        }
                    });
                    map.addLayer({
                        //蒙版图层   //通过边界数据反选 达到挖洞效果
                        id: 'mb-tag',
                        type: 'fill',
                        source: {
                            type: 'geojson',
                            data: {
                                type: 'Feature',
                                geometry: {
                                    type: 'Polygon',
                                    coordinates: [
                                        [
                                            // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                                            [-180, 90],
                                            [180, 90],
                                            [180, -90],
                                            [-180, -90],
                                        ],
                                        // 第 1个孔 
                                        //例如：[
                                        //  [31.4566,121.2671],
                                        //  [31.3481,121.2382],
                                        //  [31.3934,121.3659]
                                        // ],
                                        //这里从世界地图挖掉指定区划的面数据，
                                        //我们将原来的面数据处理一样
                                        //let mbData = results.geometry.coordinates[0].flat(1);
                                        //取面数据 coordinates的第一层并拉平 形成例如的经纬度数组
                                        shi.features[0].geometry.coordinates[0].flat(1),
                                    ],
                                },
                            },
                        },
                        paint: {
                            'fill-color': 'rgba(0,0,0,1)',
                            // 'fill-opacity': 1 /* 透明度 */,
                        },
                        layout: {
                            visibility: 'visible',
                        },
                    });
                });

        });
    </script>

</body>

</html>